<template>
    <view>
      <uni-popup ref="topaypopup" :animation="true" type="bottom">
        <view class="popup-content">
            <view class="title">
              <view class="text">试看结束，购买全集后可观看</view>
              <image class="close" src="../../static/images/close.png" @tap="close"></image>
            </view>
            <view class="cover"> 
                <image class="img" :src="videovalue.coverImg"></image>
                <view class="texttitle">
                    <view class="maintit">{{ videovalue.name }}</view>
                    <view class="subtit">{{ videovalue.collectCount}}集全</view>
                </view>
            </view>
            <view class="submit" @tap="tovip">我知道了</view>
        </view>
      </uni-popup>
    </view>
  </template>
  
  <script>
  import { getrequest, postrequest } from '../../util/api'
  export default {
    data() {
			return {
				channelNo:'',
				triggered: false,  //下拉加载控制变量
				lists:[],// 首页的列表
				liststotal:'', //视频总数
				page:1, // 请求视频的页数
        videovalue:null,
			}
		},
    props: {
      videoId: String
    },
    		// 页面加载时触发，
    created (){
     const data = uni.getStorageSync('defvideo')
     this.videovalue = JSON.parse(data) 
     console.log('this.videovalue',this.videovalue)
     console.log('this.videovalue',this.videoId)
		},
    // components: { emailiPopup },
    methods: {
        // 打开弹框
      open() {
        this.$refs.topaypopup.open()
      },
        // 关闭弹框
      close() {
        this.$refs.topaypopup.close()
      },
      // 去会员页面
      tovip(){
        this.close()
        uni.navigateTo({
            url: '/pages/vippay/vippay?videoId='+ this.videoId
        });
      },
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .popup-content {
    width: 750rpx;
    height: 660rpx;
    border-radius: 20rpx 20rpx 0 0;
    font-family: '思源黑体';
    background: linear-gradient(180deg, rgba(204, 224, 249, 1) 0%, rgba(255, 255, 255, 1) 100%);
    .title{
      width: 750rpx;
      padding-top: 50rpx;
      height: 40rpx;
      display: flex;
      .text{
        width: 550rpx;
        height: 40rpx;
        // border: 1px solid black;
        font-size: 18px;
        line-height: 40rpx;
        color: rgba(0, 0, 0, 1);
        text-align: center;
        margin: 0 0 0 70rpx;
      }
      .close{
        width: 34rpx;
        height:34rpx;
        margin: 4rpx 0 0 50rpx;
      }
    }
    .cover{
        width: 700rpx;
        height: 200rpx;
        border-radius: 10rpx;
        margin: 0 auto;
        margin-top: 80rpx;
        border: 1px solid rgba(229, 229, 229, 1);
        display: flex;
        .img{
            width: 165rpx;
            height: 184rpx;
            display: inline-block;
            margin: 7rpx;
        }
        .texttitle{
            width: 520rpx;
            height: 200rpx;
            // border: 1px solid black;
            .maintit{
                width: 510rpx;
                // height: 50rpx;
                font-size: 28rpx;
                line-height: 50rpx;
                color: rgba(0, 0, 0, 1);
                margin: 10rpx 0 0 10rpx;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;  
                overflow: hidden;
            }
            .subtit{
                width: 510rpx;
                height: 40rpx;
                margin: 20rpx 0 0 10rpx;
                font-size: 26rpx;
                line-height: 40rpx;
                color: rgba(128, 128, 128, 1);

            }
        }
    }
    .submit{
        width: 660rpx;
        height: 100rpx;
        border-radius: 30px;
        background: linear-gradient(90deg, rgba(254, 220, 131, 1) 0%, rgba(232, 193, 77, 1) 100%);
        box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
        font-size: 32rpx;
        font-weight: 700;
        line-height: 100rpx;
        color: rgba(128, 86, 23, 1);
        text-align: center;
        margin: 0 auto;
        margin-top: 100rpx;
    }
  }
  </style>
  